<template>
	<div id="goodsDetails">
		<!--<haders title="商品详情"></haders>-->

		<scroller ref="scroller">
			<div class="pd333">
				<div class="list_seiper">
					
					<mt-swipe :auto="3000"> 
						<mt-swipe-item v-for="imgitem in items.CarouselImgs" > 
							<img   :src="imgitem"  :onerror="imgError" /> 
						</mt-swipe-item>  
					</mt-swipe>
				</div>
				<div class="titles">
					<p class="aline2 p20 p_cole">{{items.GoodsName}}</p>
					<div class="listdiel plr20">
						<p class="ptext1"><span><font>￥{{items.CloudPrice}}</font></span><em>￥{{items.Price}}</em></p>
						<p class="ptext2">
							<span>已拼<font>{{items.ActorCount}}</font>件</span>
							<span><font>{{items.GroupCount}}</font>人拼团</span>
						</p>
					</div>
				</div>

				<div class="tuxedo pu15 wallfff md20">
					<p class="tux_hader plr20">
						<span v-if="TotalPerson>0"><font class="c-red">{{TotalPerson}}</font>人正在拼团，可以直接参团</span>
						<span v-else>还没人参团，您可以邀请参团</span>
						<a v-if="lists.length>3" @click="seeMore()">查看更多></a>
					</p>
					<ul class="tuoul">
						<li v-for="(item,index) in lists" v-if="index < move">
							<img :src="item.HeadImg" />
							<span class="names">{{item.NickName}}</span>
							<p class="ptime">
								<span>差<font class="c-red">{{item.RestCount}}</font>人成团</span>
								<span class="fontz" v-if="!item.texts"><i  class="loading"></i></span>
								<span class="fontz" v-else>剩余  {{item.texts}}</span>
							</p>
							<button @click="Joingroup(item)">立即参团</button>
						</li>
						 
					</ul>
				</div>

				<!--<div class="tuxedo pud15 wallfff md20">
					<p class="tux_hader plr20"><span>商品评价(<font class="c-red">120</font>)</span>
						<a>查看更多></a>
					</p>
					<ul class="textdo">
						<li>
							<p class="Userimg"><img src="../../../assets/other/error.png" alt="加载失败" :onerror="imgError"> <span>用户名</span> </p>
							<p class="Usertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin</p>
						</li>
					</ul>
				</div>-->

				<div class="gongsdeite">
					<p class="hengxian"><i></i><span>商品详情</span></p>
					<div class="details">
						<p>{{items.GoodsAbout}}</p>
						<p>{{items.GoodsDesc}}</p>
						 <ul>
						  	<li v-for="DetailsImgs in  items.DetailsImgs">
						    	<img v-lazy="DetailsImgs" alt="加载失败" :onerror="imgError">
						  	</li>
						</ul>
						 <!--<img v-for="DetailsImgs in  items.DetailsImgs" :src="DetailsImgs" alt="加载失败" :onerror="imgError"/>-->
					</div>
				</div>
			</div>

		</scroller>

		<div id="footerSpelt">
			 <ol>
	        	 <li>
	        	 	<a @click="addshopId(items.ShopId)">
	        	 		<i class="iconfont icon-dianpu"></i>
	        	 		<span>店铺</span>
	        	 	</a>
	        	 	<a v-if="isShow==0" @click="addWishlist(items.GoodsId)">
	        	 		<i class="iconfont icon-shoucang2"></i>
	        	 		<span>收藏</span>
	        	 	</a>
	        	 	<a v-else class="active" @click="addWishlist(items.GoodsId)">
	        	 		<i class="iconfont icon-shoucang2"></i>
	        	 		<span>已收藏</span>
	        	 	</a>
	        	 	<!--<a>
	        	 		<i class="iconfont icon-kefu"></i>
	        	 		<span>客服</span>
	        	 	</a>-->
	        	 </li>
	        	 <li class="clickA">
	        	 	<a @click="clickgroup">立即拼团</a> 
	        	 </li>
	        </ol> 
		</div>
	</div>
</template>

<script>
	import { Swipe, SwipeItem } from 'mint-ui'; 
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import { countdowm } from '@/js/public.js';
	import Qs from 'qs';
	import { Lazyload } from 'mint-ui';
	import { MessageBox } from 'mint-ui';
	import footerspelt from "@/components/other/footerSpelt"
	export default {
		name: "goodsDetails",
		components: { 
			footerspelt,
			Swipe,
			SwipeItem
		},
		data() {
			return {
				items:[],
				TotalPerson:'',//总人数
				lists:[],//拼团列表  
				 groupData:'',//开团参数
				 move:3,//展示条数，
				 isShow:0
			}
		},
		created(){
			this.imgError=this.$store.state.imgError;
		}, 
		mounted() {
			this.shopId=this.$route.params.shopId;
			this.getGoodsDetails(); 
			
		},
		methods: {
			//获取商品详情
			getGoodsDetails(){
				 let _this=this
				Indicator.open("加载中...");
				_this.$http.get("/GroupBuy/GetGoodsDetails", {
					params: {
						"goodsId":_this.shopId 
					}
				}).then((res) => { 
					if(res.data.code == 1) {
						_this.items=res.data.data;
						_this.isShow=res.data.data.IsCollection;
						_this.getGroupBuyList();  
						_this.addFootprint(); 
					}else{ 
					    MessageBox.alert(res.data.msg).then(action=>{
					    	_this.$router.push({path:'/clientele'})
					    })
					}
					 Indicator.close();
				 }).catch((err) => {
					console.log(err)
				}); 
			},
			//获取开团列表
			getGroupBuyList(){
				let _this=this; 
				_this.$http.get("/GroupBuy/GetGroupBuyList", {
					params: {
						"goodsId":_this.shopId,
						"page":1,
						"size":3
					}
				}).then((res) => { 
					if(res.data.code == 1) {
						_this.TotalPerson=res.data.data.TotalPerson;
						let listdata=res.data.data.List;
						listdata.forEach(function(item){
							countdowm(item.RestTime,function(text){  
								_this.$set(item,'texts',text);
								
							}); 
						}); 
						 _this.lists=listdata; 
					}else{
						Toast(res.data.msg); 
					} 
				 }).catch((err) => {
					console.log(err)
				}); 
			},  
			//立即购买，发起拼团
			clickgroup(){  
				this.$router.push({path:'/clientele/confirmOrder/'+this.items.GoodsId+'/'+1+'/'+0})
				this.$store.state.goodsPath='/clientele/confirmOrder/'+this.items.GoodsId+'/'+1+'/'+0
			},
			//参与拼团
			Joingroup(item){ 
				let _this=this;  
				_this.$http.get("/GroupBuy/ValidateGroupBuy", {
					params: {
						"goodsId":item.GoodsId,
						"joinType":2,
						"orderRecordId":item.Id
					}
				}).then((res) => {
					if(res.data.code==1){
						this.$router.push({path:'/clientele/confirmOrder/'+this.items.GoodsId+'/'+2+'/'+item.Id})
						this.$store.state.goodsPath='/clientele/confirmOrder/'+this.items.GoodsId+'/'+2+'/'+item.Id
					}else{
						Toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err)
				}); 
			},
			//收藏商品
			addWishlist(Ids){
				let _this=this; 
				_this.$http.post('/GroupBuy/AddCollection', Qs.stringify({
						"type":2,
						"goodsId":Ids
				})).then((res) => { 
					if(res.data.code == 1) {
						 this.isShow=res.data.data;
					} else { 
						Toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err);
				});	
			},
			//店铺跳转
			addshopId(ShopId){
				this.$router.push({path:'/clientele/home/'+ShopId}) 
			},
			//添加足迹
			addFootprint(){
				this.$http.post('/GroupBuy/AddFootprint',Qs.stringify({
					"goodsId":this.shopId 
				})).then((res)=>{
					console.log(res);
				}).catch((err)=>{
					console.log(err)
				})  
			},
			//查看更多
			seeMore(){
				this.move=20;
			}
		}
		
		
		
		
	}
</script>

<style scoped>
	.list_seiper {
		width: 100%;
		height: 5rem;
	}
	
	.list_seiper img {
		width: 100%;
		/*height:100%;*/
	}
	
	.titles {
		background-color: #fff;
		padding-bottom: 0.2rem;
		margin-bottom: 0.3rem;
	}
	
	.titles .p_cole {
		color: #999999;
		font-size: 0.346666rem;
	}
	
	.listdiel {
		display: flex;
		justify-content: space-between;
	}
	
	.listdiel .ptext1 {
		font-size: 0.373333rem;
		color: #999999;
	}
	
	.listdiel .ptext1 font {
		color: #DF4444;
		font-weight: 700;
	}
	
	.listdiel .ptext1 em {
		text-decoration: line-through;
		font-size: 0.266666rem;
		margin-left: 0.3rem;
	}
	
	.listdiel .ptext2 {
		font-size: 0.373333rem;
		color: #999999;
	}
	
	.listdiel .ptext2 span {
		margin-left: 0.4rem;
	}
	
	.listdiel .ptext2 span font {
		color: #DF4444;
	}
	
	.tux_hader {
		font-size: 0.373333rem;
		color: #999999;
		border-bottom: 1px solid #e2e2e2;
		padding-bottom: 0.133333rem;
	}
	
	.tux_hader a {
		float: right;
		color: #6530E0;
	}
	
	.tuoul {
		width: 100%;
	}
	
	.tuoul li {
		width: 100%;
		display: flex;
		flex-direction: row;
		font-size: 0.373333rem;
		padding: 0.2rem 0.3rem;
		line-height: 0.8rem;
		border-bottom: 1px solid #E2E2E2;
		color: #999999;
	}
	
	.tuoul li img {
		width: 0.9rem;
		height: 0.9rem;
		border-radius: 100%;
	}
	
	.tuoul li .names {
		margin-left: 0.3rem;
		line-height: 0.8rem;
		flex: 1;
	}
	
	.tuoul li .ptime {
		line-height: 0.5rem;
		text-align: center;
		flex: 2;
	} 
	.tuoul li .ptime span {
		display: block;
	}
	
	.tuoul li .ptime span:nth-child(2) {
		color: #DF4444;
	}
	
	.tuoul li button {
		padding: 0 0.2rem;
		border-radius: 0.066666rem;
		color: #fff;
		background-color: #6530E0;
		float: right;
		height: 0.8rem;
	}
	
	.tuoul li:last-child {
		border-bottom: none;
	}
	
	.textdo {
		width: 100%;
	}
	
	.textdo li p {
		font-size: 0.373333rem;
		color: #999999;
		overflow: hidden;
		padding: 0.2rem 0;
	}
	
	.textdo li .Userimg img {
		width: 0.9rem;
		height: 0.9rem;
		border-radius: 100%;
		float: left;
	}
	
	.textdo li .Userimg span {
		display: inline-block;
		float: left;
		line-height: 1rem;
		margin-left: 0.5rem;
	}
	
	.textdo li {
		padding: 0 0.3rem;
	}
	
	.gongsdeite {
		width: 100%;
		padding: 0.2rem 0.3rem;
		background-color: #fff;
		font-size: 0.373333rem;
		color: #999999;
	}
	
	.hengxian {
		width: 100%;
		font-size: 0.4rem;
		text-align: center;
		position: relative;
	}
	
	.hengxian i {
		display: inline-block;
		width: 80%;
		height: 1px;
		background-color: #E2E2E2;
		position: absolute;
		z-index: 10;
		top: 0.4rem;
		left: 10%;
	}
	
	.hengxian span {
		display: inline-block;
		z-index: 20;
		padding: 0.1rem 0.2rem;
		background-color: #fff;
		position: relative;
	}
	
	.details p {
		line-height: 0.6rem;
		text-indent: 2em;
	}
	
	.details img {
		width: 100%;
	}
	#footerSpelt{
	 	width: 100%;
	 	height: 1.3333rem;
	 	position: absolute;
	 	z-index: 100;
	 	bottom: 0;
	 	left: 0;
	 	background-color:#fff;
	 	border-top:1px solid #CCCCCC; 
	 }
	 
	 #footerSpelt ol{
	 	 display: flex;
	 	 height: 100%;
	 } 
 	#footerSpelt ol li{
 		display: flex;
 		width:50%;
 		justify-content:space-around;
 		
 	}
 #footerSpelt ol li a{
 	display: flex;
 	 	flex: 1;
		flex-direction: column;
	    justify-content: center;
	    align-items: center;
 }
 #footerSpelt ol li a i{
 	color: #999;
 	font-size:0.453333rem;
 }
 #footerSpelt ol li a span{
 	color: #999999;
 }
 
 .clickA a{
 	background-color: #6530E0;
 	color: #fff;
 	font-size:0.4rem;
 }
 
  #footerSpelt ol li a.active i,#footerSpelt ol li a.active span{
  	color:#6530E0;
  }
  
  .fontz{
  	font-size: 0.266666rem;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }
  
</style>